<template>
	<view class="content">
		<view class="listItem">
			<video id="myVideo" :src="info.video" @error="videoErrorCallback"></video>
			<view class="BoxItem">
				<view class="BoxOne">
					<u--image :showLoading="true" :src="info.avatar" width="94rpx" height="94rpx" radius="0"
						shape="circle" @click="checkImage(info.avatar)"></u--image>
					<view class="BoxContent">
						<view class="BoxTop marginBottom">
							<text class="title">{{info.name || ''}}</text>
							<text style="color:#888888;margin-left:15rpx;">{{info.country.name || ''}}教师</text>
						</view>
						<view class="BoxTop">
							<text class="Newtitle">{{info.speciality || ''}}</text>
						</view>
					</view>
				</view>
				<view class="solid"></view>
				<view class="headers_title">
					<view class="view" :style="{backgroundColor:$store.state.primaryColor}"></view>
					<text>{{info.description || ''}}</text>
				</view>
			</view>
		</view>
		<view class="BoxItemNew">
			<view class="Flex">
				<view class="rateFlex">
					<view class="leftView">
						<text>五星</text>
						<u-line-progress :percentage="info.comment_five_count" :showText="false" height="8"
							:activeColor="$store.state.primaryColor" :inactiveColor="'#F5F6F7'"></u-line-progress>
					</view>
					<view class="leftView">
						<text>四星</text>
						<u-line-progress :percentage="info.comment_four_count" :showText="false" height="8"
							:activeColor="$store.state.primaryColor" :inactiveColor="'#F5F6F7'"></u-line-progress>
					</view>
					<view class="leftView">
						<text>三星</text>
						<u-line-progress :percentage="info.comment_three_count" :showText="false" height="8"
							:activeColor="$store.state.primaryColor" :inactiveColor="'#F5F6F7'"></u-line-progress>
					</view>
					<view class="leftView">
						<text>二星</text>
						<u-line-progress :percentage="info.comment_two_count" :showText="false" height="8"
							:activeColor="$store.state.primaryColor" :inactiveColor="'#F5F6F7'"></u-line-progress>
					</view>
					<view class="leftView">
						<text>一星</text>
						<u-line-progress :percentage="info.comment_one_count" :showText="false" height="8"
							:activeColor="$store.state.primaryColor" :inactiveColor="'#F5F6F7'"></u-line-progress>
					</view>
				</view>
				<view class="rightView">
					<text class="rateNumber"
						:style="{color:$store.state.primaryColor}">{{info.avg_comment_score.toFixed(1)}}</text>
					<text class="rateName">用户综合评分</text>
					<u-rate :count="5" v-model="value" size="15" gutter="5" :activeColor="$store.state.primaryColor"
						readonly></u-rate>
				</view>
			</view>
			<view class="bottomFlex">
				<text>学生评价，共{{info.total_comment || 0}}条评价</text>
				<text>总体评价：{{info.comment_text || 0}}</text>
			</view>
		</view>
		<view class="MenusLists">
			<view v-for="(item,index) in CommentLists" :key="index" class="ItemView">
				<u--image :showLoading="true"
					:src="item.user ? item.user.avatar : 'https://yue-ke.oss-cn-guangzhou.aliyuncs.com/default/default_user.png'"
					width="80rpx" height="80rpx" radius="0" shape="circle"></u--image>
				<view class="ItemFlex">
					<text class="ItemName">{{item.user ? item.user.username : ''}}</text>
					<text class="ItemNotes">{{item.content || ''}}</text>
					<view class="ItemClick">
						<u-rate :count="5" v-model="item.score" size="15" gutter="5"
							:activeColor="$store.state.primaryColor" readonly></u-rate>
						<text class="ItemTime">{{timeDate(item.createtime) || ''}}</text>
						<view class="ClickFlex">
							<u--image :showLoading="true" v-show="!item.is_comment" @click="commentLike(item)"
								src="../../static/weidian.png" width="35rpx" height="33.49rpx" radius="0"
								mode="aspectFit"></u--image>
							<u--image :showLoading="true" v-show="item.is_comment" @click="commentLike(item)"
								src="../../static/yidian.jpg" width="35rpx" height="33.49rpx" radius="0"
								mode="aspectFit"></u--image>
							<text>{{item.like_num || 0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 	<view style="width:100%;height:200rpx;">
			<view class="regular">
				<button class="leftButton"
					@click="linkUrl(`/pages/Mine/Fixedappointment?id=${info.id}&title=switch&type=1v1`)"
					:style="{'background':$store.state.buttonColor}">固定课程预约</button>
				<button class="rightButton"
					@click="linkUrl(`/pages/Scheduleaclass/Singleappointment?id=${info.id}&vip_type=${'1,2'}`)"
					:style="{'background':$store.state.buttonColor}">单次预约课程</button>
			</view>
		</view> -->
	</view>
</template>
<script>
	import {
		teacher_info,
		teacherCommentList,
		commentLike
	} from '../../api/Teacher.js';
	export default {
		data() {
			return {
				value: 0,
				info: {},
				falt: false,
				req: {
					shop_id: uni.getStorageSync('shop_id') || 1,
					page: 1,
					limit: 10,
					teacher_id: 0,
				},
				CommentLists: [],
			}
		},
		onLoad(option) {
			this.req.teacher_id = option.id;
			this.teacher_info(option.id);
		},
		methods: {
			checkImage(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			timeDate(time) {
				const originalDate = new Date(time);
				const year = originalDate.getFullYear();
				const month = String(originalDate.getMonth() + 1).padStart(2, '0');
				const day = String(originalDate.getDate()).padStart(2, '0');
				const hours = String(originalDate.getHours()).padStart(2, '0');
				const minutes = String(originalDate.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			cheInv() {
				this.falt = !this.falt
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			},
			/**
			@method 老师详情
			**/
			async teacher_info(id = null) {
				try {
					const res = await teacher_info({
						teacher_id: id
					});
					this.info = res.data;
					this.value = this.info.avg_comment_score
					this.teacherCommentList();
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 评论列表
			**/
			async teacherCommentList() {
				try {
					const res = await teacherCommentList(this.req);
					this.CommentLists = [...res.data.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			//点赞
			async commentLike(item) {
				try {
					let is_like = item.is_comment ? 0 : 1;
					const res = await commentLike({
						is_join: is_like,
						comment_id: item.id
					});
					this.teacherCommentList();
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			time() {
				const timestamp = 1718699765;
				const date = new Date(timestamp * 1000);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				const seconds = date.getSeconds();
				return `${year}年${month}月${day}日 ${hours}时${minutes}分`;
			}
		}
	}
</script>
<style>
	page {
		background-color: #f6f7f9;
	}
</style>
<style scoped lang="less">
	button::after {
		border: none;
	}

	.content {
		width: 100%;

		.regular {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			padding: 30rpx 0rpx 30rpx 0rpx;
			box-shadow: 0rpx -4rpx 14rpx 0rpx rgba(0, 0, 0, 0.19);

			.leftButton {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #fff;
			}

			.rightButton {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				// background: linear-gradient(270deg, #3078FF 0%, #009DFE 100%);
			}

			button {
				width: 320rpx;
				height: 72rpx;
				background: #EFEFEF;
				border-radius: 50rpx;
				font-size: 28rpx;
			}
		}

		.headers_title {
			width: auto;
			margin: 0px auto;
			display: flex;
			margin-top: 20rpx;

			.view {
				width: 10rpx;
				height: 34rpx;
				background: #029CFE;
				border-radius: 6rpx;
			}

			.flex {
				display: flex;
				align-items: center;
			}

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-left: 15rpx;
			}
		}

		.listItem {
			width: 95%;
			border-radius: 16rpx;
			margin: 0px auto;

			#myVideo {
				width: 100%;
				height: 342rpx;
				border-radius: 16rpx;
			}

			.solid {
				width: auto;
				height: 2rpx;
				border: 2rpx solid #E9E9E9;
				background-color: #E9E9E9;
				margin-top: 20rpx;
			}

			.BoxItem {
				width: auto;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-top: 15rpx;
			}

			.BoxOne {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.marginBottom {
					margin-bottom: 10rpx;
				}

				.BoxTop {
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					text {
						display: block;
						font-size: 24rpx;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						font-style: normal;
					}

					.Newtitle {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}

		.BoxItemNew {
			width: 90%;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			margin: 0px auto;
			margin-top: 20rpx;
		}

		.Flex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			// border:1px solid red;
			.rateFlex {
				width: 60%;

				.leftView {
					width: 100%;
					display: flex;
					align-items: center;
					// border:1px solid red;
					margin-top: 20rpx;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #121924;
						margin-right: 10rpx;
					}
				}
			}

			.rightView {
				.rateNumber {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 72rpx;
					// color: #FE7000;
					text-align: right;
				}

				.rateName {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					text-align: right;
					margin-top: 10rpx;
					margin-bottom: 15rpx;
				}

				text {
					display: block;
				}
			}
		}

		.bottomFlex {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;
			border-top: 1px solid #E9E9E9;
			border-bottom: 1px solid #E9E9E9;
			padding-bottom: 20rpx;
			margin-top: 30rpx;

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #121924;
			}
		}

		.MenusLists {
			width: 90%;
			background-color: #fff;
			padding: 20rpx;
			margin: 0px auto;

			.ItemView {
				display: flex;
				padding: 0rpx 20rpx 20rpx 20rpx;

				.ItemFlex {
					width: 90%;
					padding-left: 20rpx;

					.ItemName {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						display: block;
					}

					.ItemNotes {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
					}

					.ItemClick {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;

						.ItemTime {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
						}

						.ClickFlex {
							display: flex;
							align-items: center;

							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #121924;
								margin-left: 15rpx;
							}
						}
					}
				}
			}
		}
	}
</style>